之前介紹過 SCSS 的基礎功能了，沒看過可以看這裡唷，這次來介紹一些小知識與進階的功能吧!

SCSS 小知識

註解

SCSS 的註解有分為兩種，一種會被輸出一種不會

編譯前

// 我不會被編譯
/* 我會被編譯 */

編譯後

/* 我會被編譯 */

連結符號

在 SCSS 中宣告變數或函式名稱時，- 與 _ 代表的是相同的東西，也就是說 list-size 與 list_size 皆為相同的變數

編譯前

$list-size: 16px;
$list_size: 20px;
// 相同變數則後面覆蓋前面

.list-item {
  font-size: $list-size;
}

編譯後

.list-item {
  font-size: 20px;
}

單位運算

SCSS 中有分為無單位、正常單位、複雜單位三種，其中複雜單位無法被編譯，其餘兩者皆可編譯，如果以正確的單位編譯就不會出錯

.list {
  // 複雜單位 - 無法編譯
  font-size: 10px * 10px; // 100px*px
  // 正常單位 - 可編譯
  font-size: 10px * 10px / 10px; // 100px
  // 無單位 - 可編譯
  font-size: 10 * 10; // 100
}

也就是說只要單位能正確抵銷便能正確編譯

編譯前

$transition-speed: 1s/50px;

@mixin move($left-start, $left-stop) {
  position: absolute;
  left: $left-start;
  transition: left ($left-stop - $left-start) * $transition-speed;

  &:hover {
    left: $left-stop;
  }
}
.slider {
  @include move(10px, 110px);
}

編譯後

.slider {
  position: absolute;
  left: 10px;
  -webkit-transition: left 2s;
  transition: left 2s;
}
.slider:hover {
  left: 110px;
}

@media 與 @supports

當需要寫到 @media 或 @supports 時，可以將其寫在樣式內側，編譯時會自動移至外層

編譯前

$layout-breakpoint-small: 960px;

@media (min-width: $layout-breakpoint-small) {
  .banner {
    position: fixed;
    @supports (position: sticky) {
      position: sticky;
    }
  }
}

編譯後

@media (min-width: 960px) {
  .banner {
    position: fixed;
  }
  @supports ((position: -webkit-sticky) or (position: sticky)) {
    .banner {
      position: -webkit-sticky;
      position: sticky;
    }
  }
}

陣列

scss 中的陣列有多種寫法與特性

• 可使用空白、逗號隔開，並可使用 ()、[] 或是不使用皆可
• 陣列的索引不是從 0 開始，而是從 1 開始
• 所有陣列都是不可變的，使用方法皆會產生新的陣列

nth(10px 12px 16px, 3); // 16px
nth((10px, 12px, 16px), 3); // 16px
nth([10px, 12px, 16px], 3); // 16px

true 與 false

scss 中認定的 false 只有 false 與 null 兩個，其餘的皆為 true，要特別注意

null 會被省略

若屬性值是 null，則該屬性則會被省略

編譯前

$size: ('a': 10px, 'b': 12px);

h3 {
  font: {
    size: map-get($size, 'c');
    weight: bold;
  }
}

編譯後

h3 {
  font-weight: bold;
}

開發者偵錯

這邊介紹的是 @error、@warn 與 @debug，前兩者是開發者給用戶的提醒，而 @debug 比較像是開發時所用的 console.log 一樣

@error

將提示寫入，若編譯時出現條件內的條件，則會跳出該錯誤提示提醒用戶

@mixin reflexive-position($property, $value) {
  @if $property != left and $property != right {
    @error "Property #{$property} must be either left or right.";
  }
  $left-value: if($property == right, initial, $value);
  $right-value: if($property == right, $value, initial);

  left: $left-value;
  right: $right-value;
}
.sidebar {
  @include reflexive-position(top, 12px);
}

Error: Property top must be either left or right.
>>     @error "Property #{$property} must be either left or right.";
   ----^

@warn

將提示寫入，若編譯時出現條件內的條件，則會跳出該警告提示提醒用戶

$known-prefixes: webkit, moz, ms, o;

@mixin prefix($property, $value, $prefixes) {
  @each $prefix in $prefixes {
    @if not index($known-prefixes, $prefix) {
      @warn "Unknown prefix #{$prefix}.";
    }
    -#{$prefix}-#{$property}: $value;
  }
  #{$property}: $value;
}
.tilt {
  @include prefix(transform, rotate(15deg), wekbit ms);
}

Warning: Unknown prefix wekbit.
    test.scss 6:7   prefix()
    test.scss 16:3  root stylesheet

@debug

開發時寫入，提供開發者確認程式運行是否如預期

@mixin size($size, $space) {
  $height: (2 * $space) + $size;
  @debug 'divider offset: #{$height}';
  line-height: $height;
}
.list {
  @include size(20px, 5px);
}

test.scss:3 Debug: height: 30px

內建函式

SCSS 的內建函式相當的多，這邊介紹幾個比較常看到的，其他可翻閱文件

數字

// 返回正整數
abs(-10px); // 10px
// 檢查單位是否一致
comparable(10px, 5em); // false
// 返回隨機數
random(); // 0 ~ 1 隨機數
random(10); // 1 ~ 10 隨機數

// 無條件進位
ceil(9.1px); // 10px
// 無條件捨去
floor(10.9px); // 10px
// 四捨五入
round(4.5px); // 5px

// 最小值
min(1px,30px,50px); // 1px
// 最大值
max(1px,30px,50px); // 50px

字串

// 返回字串位置
str-index("Helvetica Neue", "Neue"); // 11
// 返回字串長度
str-length("Helvetica Neue"); // 14
// 擷取字串
str-slice("Helvetica Neue", 1, 9); // "Helvetica"
// 返回帶引號的字串
quote(Helvetica); // "Helvetica"
// 返回不帶引號的字串
unquote("Helvetica"); // Helvetica

顏色

// 增加亮度
darken(#ff0000,10%); // #cc0000
// 減少亮度
lighten(#ff0000,10%); // #ff3333
// 降低飽和度
desaturate(#ff0000, 20%); // #e61a1a;
// 混合顏色，第三個參數表示第一個顏色的比例
mix(#036, #d2e1dd, 40%); // #7e9bad
// 返回反相色
invert(#ff0000); // #00ffff
// 調整色相環
adjust-hue(#ff0000, 50deg); // #ffd500

陣列

// 返回陣列長度
length(10px 20px 30px); // 3
// 返回索引
index(10px 20px 30px, 20px); // 2
// 返回該索引的值
nth(10px 20px 30px, 3); // 30px

map

$font-weights: ("regular": 400, "medium": 500, "bold": 700);
$font-weights-2: ("regular": 400, "bolder": 900);

// 返回對應的值
map-get($font-weights, "medium"); // 500
// 檢查 key 是否存在
map-has-key($font-weights, "regular"); // true
// 合併兩個物件
// ('regular': 400, 'medium': 500, 'bold': 700, 'bolder': 900)
map-merge($font-weights, $font-weights-2); 

通用

// 返回類型
type-of(#ffffff); // color
// 返回 unquoted + 字串形式
inspect(10px 20px 30px); // unquote("10px 20px 30px")

這次介紹的有小知識與一些內建函式，其他功能部分會在下篇介紹~